<template>
  <div>
    <CardView />
    <SaleView />
    <ObserveView />
  </div>
</template>

<script>
import CardView from '@/views/dashboard/card/CardView.vue'
import SaleView from '@/views/dashboard/sale/SaleView.vue'
import ObserveView from '@/views/dashboard/observe/ObserveView.vue'

import { mapState, mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  components: {
    ObserveView,
    SaleView,
    CardView
  },
  computed: {
    // Vuex状态管理【材料】获取方式一
    ...mapState({ list: state => state.home.list }),
    // Vuex状态管理【加工】获取方式二
    ...mapGetters(['list2'])
  },
  mounted() {
    this.initialDashboardData()
  },
  methods: {
    initialDashboardData() {
      // 远程API接口调用方式二：通过Vuex状态管理存储。
      this.$store.dispatch('getDashboardData')
      // 材料
      console.log('Array1->', this.list)
      // 加工
      console.log('Array2->', this.list2)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
